<template>
  <div class="box">
    <div class="orderlist" style="text-align: center;">
      <Orderlist :order="order" @flash="flash"></Orderlist>
    </div>

    <div class="userset">
      <div style="text-align: center;">个人设置</div>
      <div class="upload">
        <div style="width:50%;line-height: 150px;">
          设置头像：
        </div>
        <div class="elupload">
          <el-upload action="http://123.60.90.6/api/index.php" :data="data1" list-type="picture-card" method="post"
            accept=".jpg,.png" name="image" :auto-upload="true" :on-success="upsuccess" :on-error="upfailed">
            <el-icon>
              <Plus />
            </el-icon>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
          </el-upload>
        </div>
      </div>
      <div class="btn">
        <el-button type="success"  round @click="loginOut">登出</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { storeA } from '@/piniaStore/storeA'
import type { UploadProps } from 'element-plus'
import Orderlist from '../components/Usercontent/Orderlist.vue'
import { getUserOrder } from '@/api/Order'
const order:any = ref({})
async function fn(){
   order.value = await getUserOrder()
   console.log(order.value)
}
fn()
const imageUrl = ref('')
const piniaStoreA = storeA()
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
const data1 = {
  token: "28ee256592269216cf9c192661aa63ea"
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('请使用jpg格式的图片！')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小请不要超过2MB！')
    return false
  }
  return true
}
function upsuccess(res: any) {
  console.log(res.url)
  piniaStoreA.imageUrl = res.url
  localStorage.setItem("Useravater", JSON.stringify(res.url));
  ElMessage({
    message: '更改头像成功',
    type: 'success',
  })
}
function upfailed() {

}
function loginOut() {
  localStorage.removeItem("Usertoken");
  setTimeout(() => {
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
        ElMessage({
               message: '退出成功！',
               type: 'success',
             })
    }, 2000);
}
function flash(){
  setTimeout(() => {
    fn()
        ElMessage({
               message: '刷新成功！',
               type: 'success',
             })
    }, 2000);
}
</script>
<style scoped>
.box {
  display: flex;
}

.orderlist {
  width: 70%;
}

.upload {
  display: flex;
  width: 70%;
  margin-top: 10%;
}

.userset {
  width: 30%;
}

.elupload {
  width: 50%;
}
.btn{
  padding-top: 20%;
  margin: auto;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>